<template>
	<div>
        <el-button type=primary style="margin-bottom:20px" @click="addTask()">新建日程</el-button>
        <FullCalendar class="fullCalendar"  @eventDrop="handleDrop"   ref="fullCalendar" :options="calendarOptions"/>


     
    </div>
</template>

<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
import interactionPlugin from "@fullcalendar/interaction";
import resourceTimelinePlugin from "@fullcalendar/resource-timeline";

let clickCount = 0;
let prev = ""; // 上一次点击的dom节点

export default {
  data() {
    return {
      showFullcalendar: true,
      title: "",
      currentView: {},
      type: "dategrid",
      calendarOptions: {
        locale: "zh",
        timeZone: "local",
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          listPlugin,
          resourceTimelinePlugin,
          interactionPlugin,
        ],
        buttonText: {
          // 设置按钮
          today: "今天",
          month: "月",
          week: "周",
          day: "日",
        },
        headerToolbar: { // 在日历顶部定义按钮和标题。将headerToolbar选项设置为false不会显示任何标题工具栏。可以为对象提供属性start/center/end或left/center/right。这些属性包含带有逗号/空格分隔值的字符串。用逗号分隔的值将相邻显示。用空格分隔的值之间会显示一个很小的间隙。
          right: 'today prev,next',
          center: 'title',
          left: 'timeGridDay,timeGridWeek,dayGridMonth'
        },
        initialView: "dayGridMonth", // 设置默认显示月，可选周、日
        resourceAreaWidth: 200,
        contentHeight: 600,
        slotMinWidth: 70,
        resourceOrder: "number",
        editable: true,
          weekends: true,
        dayMaxEvents: true, // allow "more" link when too many events
        eventDurationEditable: true, // 可以调整事件的时间
        selectable: true, // 日历格子可选择
        nowIndicator: true, // 现在的时间线显示
         // 争对全天的情况下，以块状显示 // 隐藏头部的导航栏
        selectMirror: false,
        displayEventEnd: true, // like 08:00 - 13:00
        eventTimeFormat: {
          // like '14:30:00'
          hour: "2-digit",
          minute: "2-digit",
          meridiem: false,
          hour12: false, // 设置时间为24小时
        },
        events: [
            { id:1,title:"我是测试数据",start:'2022-09-04 9:00',end:'2022-09-04 11:00',color:"red"}
        ],
        eventColor: "#378006",
        allDayText: "全天",
        dateClick: this.handleDateClick,
        resourceAreaHeaderContent: "Rooms",
        resources: [
          {
            id: "number_1",
            title: "asas",
            number: 1,
          },
          // {
          //   id: "number_2",
          //   title: "asas",
          //   number: 2,
          // },
          // {
          //   id: "number_3",
          //   title: "asas",
          //   number: 3,
          // },
        ],
        schedulerLicenseKey: "GPL-My-Project-Is-Open-Source",
        resourceLabelContent(arg) {
          return {
            html: `<div>id: ${arg.resource.id}</div><div>title: ${arg.resource.title}</div>`,
          };
        },
        views: {
          customTimeLineWeek: {
            type: "resourceTimeline",
            duration: { weeks: 1 },
            slotDuration: { days: 1 },
            buttonText: "Custom Week",
            slotLabelFormat: {
              weekday: "long",
              // month: 'numeric',
              // day: 'numeric',
              omitCommas: true,
            },
          },
          customTimeLineMonth: {
            type: "resourceTimeline",
            duration: { month: 1 },
            slotLabelFormat: {
              // month: 'numeric',
              day: "numeric",
              // omitCommas: true,
            },
          },
          customGridWeek: {
            type: "timeGridWeek",
            dayHeaderFormat: {
              weekday: "long",
            },
            slotLabelFormat: {
              // 左侧时间格式
              hour: "2-digit",
              minute: "2-digit",
              meridiem: "lowercase",
              hour12: false, // false设置时间为24小时
            },
          },
        },
        // 切换视图调用的方法
        datesSet() {},
      },
      calendarApi: null,
      monthEvent: [
        {
          id: "number_1",
          resourceId: "number_1",
          title: "event 1",
          start: "2022-09-04 10:00",
          end: "2022-09-04 18:00",
          color: "purple",
        },
        {
          resourceId: "number_2",
          id: "number_2",
          title: "event 2",
          start: "2022-07-22",
          color: "purple",
        },
        { title: "event 3", start: "2022-07-23" },
        { title: "event 4", start: "2022-07-24" },
        { title: "event 5", start: "2022-07-21" },
        { title: "event 6", start: "2022-07-21", color: "purple" },
        { title: "event 7", start: "2022-07-21" },
        { title: "event 8", start: "2022-07-21" },
        {
          id: "number_3",
          resourceId: "number_3",
          title: "event 6",
          start: "20211120",
          end: "20211122",
          color: "purple",
          extendedProps: {
            description: "asdasdasdasdasdasdasdasds",
          },
        },
        {
          id: 4,
          title: "event 7",
          start: "2021-11-22",
          extendedProps: {
            description: "444444444444",
          },
        },
      ],
      weekEvent: [
        {
          id: "number_1",
          resourceId: "number_1",
          title: "week_event",
          start: "2025-09-08",
          color: "purple",
        },
        {
          id: "number_1",
          resourceId: "number_1",
          title: "event 1",
          start: "2022-07-04 10:00",
          end: "2022-07-04 18:00",
          color: "purple",
        },
      ],
      // events: [
      //   {
      //     id: "number_1",
      //     // resourceId: "number_1",
      //     title: "event 1",
      //     start: "2022-07-04 09:00",
      //     end: "2022-07-04 18:00",
      //     color: "purple",
      //   },
      // ]
    };
  },
  components: {
    FullCalendar
  },
  mounted() {
         this.calendarApi = this.$refs.fullCalendar.getApi(); 
  },
  
  
   methods: {
    DropEvent(info){
      console.log("拖动",info.event.title)
    },
    /***************
     * 新建日程
     */
    
    handleDateClick(dateClickInfo) {
      console.log(dateClickInfo,"111222")
    },
    
    eventLimitClickFun(data){

    },
    addTask(){
      this.dialogFormVisible=true;
    },
    makeSure(){
      this.calendarOptions.events.push(this.form)
       this.dialogFormVisible=false;
    },
    handleDrop(data){
      console.log("我拖了我",data)
    },
    handleEventClick(data){
      console.log("data555666",data.event.title,data)


    },
    handleMouseEnter(mouseEnterInfo) {
      // console.log(mouseEnterInfo.event.startStr,"33334467")
      // 提示：mouseEnterInfo.event.startStr 可以获取当前事件的开始事件
    },
    handleMouseLeave(mouseEnterInfo) {
      // console.log(mouseEnterInfo,"555777")
    },
    todayClick(mouseEvent, htmlElement) {
      this.calendarApi.today() // 将日历移动到当前日期。
      this.calendarApi.getDate() // 返回日期的日历的当前日期
    },
    nextClick(mouseEvent, htmlElement) {
      // calendarApi.next() // 将日历向前移动一步（例如，一个月或一周）。
      this.calendarApi.next();
      // 如果dayGridMonth查看日历，则将日历向前移动一个月。
      // 如果日历位于dayGridWeek或中timeGridWeek，则将日历向前移动一周。
      // 如果日历位于dayGridDay或中timeGridDay，则将日历向前移动一天。
    },
    prevClick(mouseEvent, htmlElement) {
      this.calendarApi.prev() // 将日历后退一步（例如，一个月或一周）。
      // 如果dayGridMonth查看日历，则将日历后移一个月。
      // 如果日历位于dayGridWeek或中timeGridWeek，则将日历后移一周。
      // 如果日历位于dayGridDay或中timeGridDay，则将日历移回一天。
    },
    columnHeaderHtmlFun(title){
      console.log("title777888",title)

    }
  }
};
</script>

<style>
.demo-app {
  display: flex;
  min-height: 100%;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}
.demo-app-sidebar {
  width: 300px;
  line-height: 1.5;
  background: #eaf9ff;
  border-right: 1px solid #d3e2e8;
}
.demo-app-sidebar-section {
  padding: 2em;
}
.demo-app-main {
  flex-grow: 1;
  padding: 3em;
}
.fc {
  /* the calendar root */
  max-width: 1100px;
  margin: 0 auto;
}
.fc-toolbar {
  width: 100%;
  margin: 30px auto;
  display: flex;
  flex: 1;
  justify-content: space-around;
  align-content: center;
}
.fc-center {
  display: flex;
  align-content: center;
}
.fc-center .title {
  font-size: 16px;
  padding: 0 15px;
  font-weight: 700;
  line-height: 40px;
}
</style>

